<template>
  <div class="activity-list">
    <van-list
      v-model="loading"
      :finished="finished"
      :finished-text="finishedText"
      @load="loadActivity"
    >
      <activity-cell
        v-for="item in list"
        :key="item.id"
        :data="item"
        :tpl="tpl"
      />
    </van-list>
  </div>
</template>
<script>
import ActivityCell from './activity-cell'
import { List, Toast } from 'vant'
export default {
  name: 'activity-list',
  props: {
    router: String,
    params: Object,
    pagination: Boolean,
    tpl: String
  },
  components: {
    ActivityCell,
    [List.name]: List,
    [Toast.name]: Toast
  },
  data () {
    return {
      loading: false,
      finished: false,
      isLoading: false,
      count: 0,
      list: [],
      finishedText: '没有更多了',
      meta: {
        totalCount: 0,
        pageCount: 0,
        currentPage: 0,
        perPage: 0
      }
    }
  },
  computed: {
    isPagination () {
      return !!this.pagination
    }
  },
  methods: {
    loadActivity () {
      console.log('--------loading--------')
      let url = this.router
      let params = Object(this.params)
      if (this.isPagination) {
        let page = this.meta.currentPage + 1
        params = Object.assign(params, { page: page })
      }

      this.axios
        .get(url, {
          params: params,
          headers: { FastMode: true }
        })
        .then(response => {
          let data = response.data
          if (this.isPagination && data.items) {
            let itemCount = data.items.length
            if (itemCount > 0) {
              this.list = this.list.concat(data.items)
            }
            this.meta = data.meta
            this.loading = false
            if (
              this.meta.pageCount <= this.meta.currentPage ||
              itemCount <= 0
            ) {
              this.finished = true
            }
          } else {
            this.list = data
            this.loading = false
            this.finished = true
            this.finishedText = ''
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.activity-list {
  padding: 0 10px;
  .activity-panel {
    margin: 10px 0;
  }
}
</style>
